<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
    <title>小儿推拿</title>
    <%@ include file="/include/datetables.jsp"%>
</head>
<body>
<div class="Baby_Healthy_home">
    <input type="hidden" name="userIds" value=""/>
    <input type="hidden" name="userImgs" value=""/>
    <input type="hidden" name="doctorId" value="7"/>
    <input type="hidden" name="subclinicId" value="1"/>
    <input type="hidden" name="bookingName" value="大耳朵"/>
    <input type="hidden" name="bookingPhone" value="13888888888"/>
    <input type="hidden" name="bookingPhones" value="13888888889"/>
    <!--左侧-->
    <jsp:include page="/include/menu.jsp" flush="true">
        <jsp:param name="index" value="1"/>
    </jsp:include>
    <!--右侧-->
    <div class="Baby_Healthy_home_right">
        <div class="Baby_Healthy_home_right_top">
            <span class="Baby_Healthy_home_right_top_tit js_count_card"><i class="icon iconfont icon-menu2"></i>快速开卡</span>
            <span class="Baby_Healthy_home_right_top_tit js_prepay_card hidden"><i class="icon iconfont icon-menu2"></i>快速储值</span>
            <span class="Baby_Healthy_home_right_top_tit js_self_count_card hidden"><i class="icon iconfont icon-menu2"></i>自定义计次卡</span>
        </div>
        <div class="Baby_Healthy_home_billing_right_container container_top">
            <div class="Baby_Healthy_home_billing_right_left">
                <dl class="Baby_Healthy_home_billing_left_dl">
                    <dt class="Baby_Healthy_home_billing_left_dt">卡项</dt>
                    <dd class="Baby_Healthy_home_billing_left_dd js_power_5 js_prepay_card hidden" flage="false">储值卡</dd>
                    <dd class="Baby_Healthy_home_billing_left_dd js_power_4 js_count_card" flage="false">计次卡</dd>
                    <dd class="Baby_Healthy_home_billing_left_dd js_power_4 js_self_count_card" flage="false">自定义卡</dd>
                </dl>
            </div>
            <%--无信息页面--%>
            <div class="Baby_Healthy_home_billing_right_center js_nocontent">
                <div class="noticeImg noticeImg13" style="background-size:30%"></div>
            </div>
            <%--卡項列表--%>
            <div class="Baby_Healthy_home_billing_right_center hidden js_cardListgroup">
                    <p class="Baby_Healthy_home_billing_right_center_tit">储值卡</p>
                    <!-- <div class="home_fast_storage" id="cardwrap"></div> -->
                    <div class="storeelmwrap row zcwrap" id="cardwrap">
                    </div>
            </div>
            <%--右側--%>
            <div class="Baby_Healthy_home_billing_right_right">
                <div class="serachSelect">
                    <select id="searchbox" class="billing_right_right_btn_searchbox" style="width: 80%;">
                        <option value=""></option>
                    </select>
                </div>
                <div class="noticeImg noticeImg13 newNotic"></div>
                <%--消费详情--%>
                <div class="consumeListContains hidden" style="height: 100%"></div>
            </div>
            <!-- 收款弹窗 -->
            <div class="gatheringlist zcwrap hidden">
                <div class="zccard">
                    <h5 class="tit">订单信息</h5>
                    <div class="zccardelm" style="padding: 0 10px;">
                        <div class="row">
                            <div class="col-sm-4">
                                下单时间：
                            </div>
                            <div class="col-sm-8 font_right">
                                <p class="js_createTimetr">2018-01-18  20:33:39</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">
                                会员姓名：
                            </div>
                            <div class="col-sm-8 font_right">
                                <p class="js_userName">--</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">
                                会员电话：
                            </div>
                            <div class="col-sm-8 font_right">
                                <p class="js_userPhone">--</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">
                                收银员：
                            </div>
                            <div class="col-sm-8 font_right">
                                <p class="js_doctorName">--</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">
                                门店：
                            </div>
                            <div class="col-sm-8 font_right">
                                <p class="js_subclinicName">--</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="zccard">
                    <h5 class="tit">消费明细</h5>
                    <div class="zccardelm detaillist">
                        <div class="row cardelm">
                            <div class="col-sm-6 cardname">
                                --
                            </div> 
                            <!-- <div class="col-sm-4">
                                <p class="font_right">x<span class="num">1</span></p>
                            </div> -->
                            <div class="col-sm-6 font_right">
                                <p class="money font_right">￥<span>0</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="zccard">
                    <h5 class="tit">订单备注</h5>
                    <div class="zccardelm">
                        <div class="row">
                            <div class="col-sm-12 js_order_desc">
                                --
                            </div> 
                        </div>
                    </div>
                </div>
                <div class="zccard">
                    <h5 class="tit">选择支付方式</h5>
                    <div class="zccardelm paystyle">
                        <div class="row" style="margin-bottom:1rem;">
                            <div class="col-lg-4 col-md-4 col-sm-6 pd_hor5">
                                <div class="payelm active" rel="3">
                                    <i class="icon money"></i>
                                    <span>现金</span>
                                </div>
                            </div>
                            <!-- <div class="col-lg-4 col-md-4 col-sm-6 pd_hor5">
                                <div class="payelm" rel="0">
                                    <i class="icon ye"></i>
                                    <span>会员余额</span>
                                </div>
                            </div> -->
                            <div class="col-lg-4 col-md-4 col-sm-6 pd_hor5">
                                 <div class="payelm" rel="4">
                                    <i class="icon ca"></i>
                                    <span>Pos机</span>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-6 pd_hor5">
                                <div class="payelm" rel="2">
                                    <i class="icon wechat"></i>
                                    <span>微信</span>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-bottom:2rem;">
                            
                            <div class="col-lg-4 col-md-4 col-sm-6 pd_hor5">
                                <div class="payelm" rel="1">
                                    <i class="icon alpay"></i>
                                    <span>支付宝</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 font_right">
                                <p class="countsum" data-cost="499">应收金额：&nbsp;&nbsp;&nbsp;&nbsp;<span>￥ 499</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="${pageContext.request.contextPath}/js/homefastStorage.js"></script>
<script>
    var DocData={
        flag:baseFn.getQueryString('flag',true),
        cashierId:SessionData.userId,//后台登陆用户
        orderId:baseFn.getQueryString('orderId',true),
        userId:baseFn.getQueryString('userId',true),
        userName:'',
        userPhone:'',
        doctorId:SessionData.userId,
        subclinicId:SessionData.subclinicId,
        doctorName:SessionData.userName,
        subclinicName:SessionData.subclinicName,
        pay:0,
        payWay:3,//付款方式 0:余额;1:支付宝;2:微信;3:现金;4:Pos机;5:次卡
        orderdesc:'',
        initOrder:function(data){
            var _opts={
                createTimetr:baseFn.timestampToTime(Date.parse(new Date())),
                userName:this.userName,
                userPhone:this.userPhone,
                doctorName:this.doctorName,
                subclinicName:this.subclinicName,
                pay:this.pay,
                orderDesc:this.orderdesc==''?'无':this.orderdesc
            }
            var _pDom = $('.gatheringlist')
            _pDom.find('.js_createTimetr').text(_opts.createTimetr)
            _pDom.find('.js_userName').text(_opts.userName)
            _pDom.find('.js_userPhone').text(_opts.userPhone)
            _pDom.find('.js_doctorName').text(_opts.doctorName)
            _pDom.find('.js_subclinicName').text(_opts.subclinicName)
            _pDom.find('.js_order_desc').text(_opts.orderDesc)
            _pDom.find('.zccardelm .payelm').removeClass('active')
            _pDom.find('.zccardelm .payelm[rel=3]').addClass('active')
            for(var i=0;i<this.cardListDada.length;i++){
                var _elm=this.cardListDada[i];
                if(_elm.cardId == this.cardId){
                    this.cardType = _elm.cardType
                    if(_elm.cardType == 4){
                        _pDom.find('.detaillist .cardname').text(_elm.cardName)
                    }else{
                        _pDom.find('.detaillist .cardname').text(_elm.serviceName+'*'+_elm.cardCount)
                    }
                    _pDom.find('.detaillist .money').text(_elm.accountDiscount)
                }
            }
            _pDom.find('.countsum').find('span').text('￥ '+_opts.pay)
        },
        cardListDada:[],
        serviceListDada:[],
        initCardList:function(initData){//渲染卡项列表
            var _this = this
            $.get(baseUrl.base+baseUrl.card+'selectSysAccountCardList',{cardState:1},function(res){
                if(res.code == 0){
                    var dataMsg = res.results;
                    for(var i=0;i<dataMsg.length;i++){
                        _this.cardListDada.push(dataMsg[i])
                        var _cardHtml = ''
                        if(dataMsg[i].cardType == 4){
                            // _cardHtml='<div class="home_fast_storage_detail" rel="'+dataMsg[i].cardType+'">\
                            //     <img class="home_fast_storage_detail_img" src="'+dataMsg[i].cardImg+'">\
                            //     <p class="home_fast_storage_sum">'+dataMsg[i].cardName+'</p>\
                            //     <p class="home_fast_storage_name">\
                            //         ￥<span>'+dataMsg[i].accountDiscount+'</span>\
                            //         <input type="checkbox" value="'+dataMsg[i].cardId+'" rel="off" data-cost="'+dataMsg[i].cardValue+'" class="checkBox storage_name_checkbox">\
                            //     </p>\
                            // </div>'
                            _cardHtml='<div class="col-sm-3 pd_hor5 js_storeelm" rel="'+dataMsg[i].cardType+'">\
                                            <div class="row storecnt">\
                                                <div class="col-sm-10 pd_hor5">\
                                                    <p class="tit">'+dataMsg[i].cardName+'</p>\
                                                    <p class="tips">￥<span>'+dataMsg[i].accountDiscount+'</span></p>\
                                                </div>\
                                                <div class="col-sm-2 pd_hor5">\
                                                    <input type="checkbox" value="'+dataMsg[i].cardId+'" data-cost="'+dataMsg[i].cardValue+'" rel="off" class="checkBox storeelm_checkbox">\
                                                </div>\
                                            </div>\
                                        </div>'
                        }else if(dataMsg[i].cardType == 5){
                            // _cardHtml='<div class="home_fast_storage_detail" rel="'+dataMsg[i].cardType+'">\
                            //     <img class="home_fast_storage_detail_img" src="'+dataMsg[i].cardImg+'">\
                            //     <p class="home_fast_storage_sum">'+dataMsg[i].serviceName+'*'+dataMsg[i].cardCount+'</p>\
                            //     <p class="home_fast_storage_name">\
                            //         ￥<span>'+dataMsg[i].accountDiscount+'</span>\
                            //         <input type="checkbox" value="'+dataMsg[i].cardId+'" rel="off" data-cost="'+dataMsg[i].cardValue+'" class="checkBox storage_name_checkbox">\
                            //     </p>\
                            // </div>'
                            _cardHtml='<div class="col-sm-3 pd_hor5 js_storeelm" rel="'+dataMsg[i].cardType+'">\
                                            <div class="row storecnt">\
                                                <div class="col-sm-10 pd_hor5">\
                                                    <p class="tit">'+dataMsg[i].cardName+'</p>\
                                                    <p class="tips">￥<span>'+dataMsg[i].accountDiscount+'</span></p>\
                                                </div>\
                                                <div class="col-sm-2 pd_hor5">\
                                                    <input type="checkbox" value="'+dataMsg[i].cardId+'" data-cost="'+dataMsg[i].cardValue+'" rel="off" class="checkBox storeelm_checkbox">\
                                                </div>\
                                            </div>\
                                        </div>'
                        }
                        $('#cardwrap').append(_cardHtml); 
                    }
                    if(initData){

                    }
                }else{
                    baseFn.infoDialog(res.msg)
                }
            },'json')
        },
        initInitServiceList: function(data) {
            var _this = this
            $.get(baseUrl.base+baseUrl.init+'selectInitServiceList',{},function(res){
                if(res.code == 0){
                    var dataMsg = res.results;
                    console.log(dataMsg);
                    $('#cardwrap').empty();
                    for(var i=0;i<dataMsg.length;i++){
                        _this.serviceListDada.push(dataMsg[i])
                        var _serviceHtml = ''
                        _serviceHtml='<div class="col-sm-3 pd_hor5 js_storeelm" rel="'+dataMsg[i].cardType+'">\
                                            <div class="row storecnt">\
                                                <div class="col-sm-10 pd_hor5">\
                                                    <p class="tit">'+dataMsg[i].serviceName+'</p>\
                                                    <p class="tips">￥<span>'+dataMsg[i].serviceCost+'</span></p>\
                                                </div>\
                                                <div class="col-sm-2 pd_hor5">\
                                                    <input type="checkbox" value="'+dataMsg[i].serviceId+'" data-cost="'+dataMsg[i].serviceCost+'" rel="off" class="checkBox storeelm_checkbox">\
                                                </div>\
                                            </div>\
                                        </div>'
                        $('#cardwrap').append(_serviceHtml);
                    }
                }else{
                    baseFn.infoDialog(res.msg)
                }
            },'json')
        },
        cardId:''
    }
    if(DocData.flag == 1){
        $('.js_prepay_card').addClass('hidden')
        $('.js_count_card').removeClass('hidden')
        $('.js_self_count_card').addClass('hidden')
        $('.noticeImg').addClass('noticeImg13')
    }else if (DocData.flag == 2) {
        $('.js_count_card').addClass('hidden')
        $('.js_prepay_card').removeClass('hidden')
        $('.js_self_count_card').addClass('hidden')
        $('.noticeImg').addClass('noticeImg14')
    }else{
        $('.js_count_card').addClass('hidden')
        $('.js_prepay_card').addClass('hidden')
        $('.js_self_count_card').removeClass('hidden')
        // $('.noticeImg').addClass('noticeImg14')
    }
    DocData.initCardList();
    //过滤卡项
    function filterSelectList(opts){
        //过滤---主症
        var _opts=$.extend({},{
            baseData:DocData.newMainList,
            parentDomName:'.fast_caseOfIll',
            domName:'.mainList',
            id:'typeId',
            text:''
        },opts || {})
        var _temp=[];
        $(_opts.parentDomName).find('select'+_opts.domName).each(function(j,m){
            _temp.push($(m).val())
         })
         $(_opts.parentDomName).find('select'+_opts.domName).each(function(i,n){
             for(var x=0;x<_opts.baseData.length;x++){
                var _val = _opts.baseData[x][_opts.id]
                var _show=_temp.every(function(val){
                    return val != _val 
                }) || _val == $(n).val()
                if(_show){
                    $(n).find('option[value="'+_val+'"]').removeClass('hidden')
                }else{
                    $(n).find('option[value="'+_val+'"]').addClass('hidden')
                }
             }
        })

    }
    //总计
    function sumTotal(){
        var _pay = 0
        if($('#js_cardBox').find('.newAddBtn').length != 0){
            $('.js_orderdesc_wrap').removeClass('hidden')
        }else{
            $('.js_orderdesc_wrap').addClass('hidden')
            $('.js_orderDesc').val('')
        }
        $('#js_cardBox').find('.newAddBtn').each(function(i,n){
            var _cardpay = Number($(n).data('pay'))
            _pay += _cardpay;
        })
        $('.bottomList_home').find('.likeRed').text(_pay)
        DocData.pay = _pay
    }
    // 搜索框
    $('.billing_right_right_btn_searchbox').select2({
        placeholder: '请输入会员手机号或姓名',
        language:{
            noResults:function(){return '<span class="font_blue">没有查询到该会员！</span>'},
            searching:function(){return '查询中。。。'}
        },
        allowClear: true,
        ajax: {
            url: baseUrl.base+"user/selectUserList",
            type: "get",
            dataType: 'json',
            data: function (params) {
                return {
                    userPhone: params.term
                }
            },
            processResults: function (data) {
                var dataResult =[];
                var dataItem = data.results.rows;
                for(var i=0;i<dataItem.length;i++){
                    var resultObj = {id:'',text:''};
                    resultObj['text'] = dataItem[i].userName + '-' +baseFn.getHidePhoneStr(dataItem[i].userPhone);
                    resultObj['id'] = dataItem[i].userPhone;
                    dataResult.push(resultObj);
                }
                return {
                    results:dataResult,
                }
            }
        },
        escapeMarkup: function (markup) {return markup; }, // 自定义格式化防止xss注入
        minimumInputLength: function(e){
            var _val = e.term;
            if(/^[\u4e00-\u9fa5]{1,5}$/.test(_val)){
                return 1
            }else{
                return 3
            }
        }//最少输入多少个字符后开始查询
    });
    // 搜索框选中
    $(".billing_right_right_btn_searchbox").on("select2:select",function(){
        var userPhone = $(this).val();
        $('.Baby_Healthy_home_billing_left_dd').attr('flage',true);
        DocData.orderId = ''
        getUserMsgHandle(userPhone);
    })
    // 1.获取用户信息
    function getUserMsgHandle(userPhone){
        $.ajax({
            url:baseUrl.base+"user/selectUserList",
            type:'get',
            data:{
                "userPhone":userPhone
            },
            success:function(data){
                if(data.code=="0"){
                    var dataResult = data.results.rows;
                    $('#searchbox').val(null).trigger('change');
                    if(dataResult!=''){
                        $('.newNotic>p').hide();//隐藏无数据提示
                        for(var i = 0;i<dataResult.length;i++){
                            userId = dataResult[i].userId;
                            DocData.userId =dataResult[i].userId
                            DocData.userName =dataResult[i].userName
                            DocData.userPhone = baseFn.getHidePhoneStr(dataResult[i].userPhone)
                            var gradeName = dataResult[i].dataResult;
                            var subclinicName = dataResult[i].subclinicName;
                            var userImg = (baseFn.notNull(dataResult[i].userImg)?dataResult[i].userImg: baseUrl.tempHeadImg);
                            var userName = dataResult[i].userName;
                            var userPhone = dataResult[i].userPhone;
                            var gradeName = dataResult[i].gradeName;
                            DocData.userName=userName
                            var msgHtml = '<div class="listContainsTitle bottomLine">\
                                            <span>消费清单</span> <span class="clearAll ">清空页面</span>\
                                            </div>\
                                            <div class="baseInfo bottomLine zcwrap">\
                                                <div class="topHeadPart bottomLine clearfix">\
                                                    <div class="headPortrait fl">\
                                                        <img src="'+userImg+'">\
                                                    </div>\
                                                    <div class="fl" style="padding: 0.4rem;padding-bottom: 0;">\
                                                        <div style="height: 1.5rem;">'+userName+'</div>\
                                                        <div>'+baseFn.getHidePhoneStr(userPhone)+'</div>\
                                                    </div>\
                                                </div>\
                                                <div class="newAddBtn saledata">\
                                                    <div class="fl">销售人员 <span class="patientDesc doctor">接诊推拿师</span></div>\
                                                    <div class="fr">\
                                                        <span class="patientDesc sublic">门店</span>\
                                                    </div>\
                                                </div>\
                                                <div class="js_project_wrap" id="js_cardBox" rel="1"></div>\
                                                <div class="row achItem1 hidden js_orderdesc_wrap formgroup" style="line-height: 3rem;margin:auto 0;">\
                                                    <div class="col-sm-3 nopd font_left">\
                                                        <span class="patientDesc">订单备注：</span>\
                                                    </div>\
                                                    <div class="col-sm-9 nopd font_right">\
                                                        <input class="form-control js_orderDesc" style="border:1px solid #ccc"></input>\
                                                    </div>\
                                                </div>\
                                                <!--<div class="clearfix eachItem1 hidden js_sumtit" style="line-height: 3rem;">\
                                                    <div class="fl">\
                                                        <span class="patientDesc">小计金额</span>\
                                                    </div>\
                                                    <div id="PayNum" class="fr">\
                                                        ￥<span>0</span>\
                                                    </div>\
                                                </div>\
                                                <div class="js_project_wrap" id="addProductBox_list" rel="2"></div>\
                                                </div>-->\
                                            </div>\
                                            <div class="bottomList_home">\
                                                <div class="footerWrapper">\
                                                </div>\
                                                <div class="payWrapper clearfix">\
                                                    <div class="fl">\
                                                        待支付： ￥<span class="likeRed">0</span>\
                                                    </div>\
                                                    <div class="fr">\
                                                        <button class="btn btn-sm gatheringBtn btn-info">收款</button>\
                                                    </div>\
                                                </div>\
                                            </div>';
                            $('.consumeListContains').html(msgHtml);
                        }
                        $('#searchbox').parent('.serachSelect').addClass('hidden').siblings('.consumeListContains').removeClass('hidden').siblings('.noticeImg').addClass('hidden');
                    }else{
                        $('.Baby_Healthy_home_billing_left_dd').attr('flage',false);
                        $('.newNotic').html('<p class="notic_box_img">用户不存在</p>');
                    }
                }
                $($('.Baby_Healthy_home_billing_left_dd:not(".hidden")')[0]).trigger('click')
                $('.saledata').find('.doctor').text(DocData.doctorName)
                $('.saledata').find('.sublic').text(DocData.subclinicName)
                // if(DocData.orderId != ''){
                //     $('.gatheringBtn ').trigger('click')                     
                // }
            }
        });
    }
    // 选中卡项
    $('#cardwrap').on('click','.storeelm_checkbox',function(){
        var value = $(this).val(),_parent=$(this).parents('.js_storeelm');
        _parent.siblings('.js_storeelm').find('input[type=checkbox]').removeClass('checkBox_checked')
        $('#js_cardBox>.cardelm').remove()
        if($(this).hasClass('checkBox_checked')){
            DocData.cardId = ''
            $('#js_cardBox>.cardelm').each(function(i,n){
                var newRel = $(n).find('.newAddBtn').attr('rel');
                if(value==newRel){
                    $(n).remove();
                }
            });
            $(this).removeClass('checkBox_checked');
        }else{
            DocData.cardId = value
            $(this).addClass('checkBox_checked');
            var money = $(this).parents('.js_storeelm').find('.tips span').text();
            var name = $(this).parents('.js_storeelm').find('.tit').text();
            var _html='<div class="cardelm">\
                        <div class="row newAddBtn" style="font-size: 15px;" rel="'+value+'" data-pay="'+money+'">\
                            <div class="col-sm-8 patientDesc texthidden font_left">'+name+'</div>\
                            <div class="col-sm-4 font_right"><span>￥'+money+'</span><i style="margin-left: 1rem" class="icon iconfont icon-shanchu deleteFr"></i></div>\
                        </div>\
                        <div class="row newAddBtn" style="font-size: 15px;" rel="'+value+'" data-pay="'+money+'">\
                            <div class="col-sm-8 patientDesc texthidden font_left">开通次数</div>\
                            <div class="col-sm-4 font_right"><input class="form-control js_cardCount" style="border:1px solid #ccc"></input></div>\
                        </div>\
                    </div>'    
            $('#js_cardBox').append(_html) 
            
        }
        sumTotal()
    })
    $('.consumeListContains').on('click','.deleteFr',function(){
        var _pdom = $('#cardwrap'),_checkboxRel=$(this).parents('.newAddBtn').attr('rel')
        _pdom.find('input[value='+_checkboxRel+']').removeClass('checkBox_checked')
        $(this).parents('.cardelm').remove();
        DocData.cardId = ''
        sumTotal()
    })
    //过滤卡项
    function filterCardList(val){
        $('#cardwrap').find('.js_storeelm').each(function(i,n){
            if($(n).attr('rel') != val){
                $(n).addClass('hidden')
            }else{
                $(n).removeClass('hidden')
            }
        })
    }
</script>
</html>